<template>
  <div class="arl-box flex-col-start">
    <div class="arl-header">
      排行榜
    </div>
    <div class="arl-body flex-col-start">
      <el-collapse v-model="activeName" accordion class="arl-item">
        <el-collapse-item v-for="(item,index) in animalList" :name="index">
          <template slot="title">
            <div class="arl-item-header">
              <span>{{ index + 1 }}</span>
              <span>、{{ item.name }}</span>
            </div>
          </template>
          <div class="arl-item-body">
            <el-avatar :size="150" :src="item.img" class="arl-item-body-img"></el-avatar>
          </div>
        </el-collapse-item>

      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "AnimalRankingList",
  data(){
    return{
      animalList: [
        {
          id: 1,
          name: "大白",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp478917080.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682590812&t=162a77fd5008d5160ea8fbfec236a0da",
          school: {
            name: "北京大学",
            area: "航空港校区 16栋"
          }
        },
        {
          name: "牛奶",
          img: "https://img1.baidu.com/it/u=1651849877,3929319560&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888",
          school: {
            name: "北京大学",
            area: "航空港校区 16栋"
          }
        },
        {
          name: "阿达",
          img: "https://img1.baidu.com/it/u=1651849877,3929319560&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888",
          school: {
            name: "北京大学",
            area: "航空港校区 16栋"
          }
        },

      ]
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push({
        path: `/index/animal/info/${item.id}`
      })
    }
  }
}
</script>

<style scoped lang="less">
  .arl-box{
    width: 100%;
    .arl-header{
      height: 60px;
      font-size: 22px;
    }
    .arl-body{
      width: 100%;
      .arl-item {
        width: 90%;
        font-size: 14px;
        transition: all 0.5s;
        overflow: hidden;
        padding: 10px;

        .arl-item-header {
          padding: 0 10px;
        }

        .arl-item-body {

        }


      }



    }

  }

</style>